<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/layout">

<body>
	<section layout:fragment="content">

		<div class="container">
			<form id="loginForm" th:action="@{/j_spring_security_check}"
				role="form" class="form-horizontal" method="post">

				<div id="loginPanel" >

					<div class="center-block" style="text-align: center;">
						<img align="middle" src="/img/logo.png"
							th:src="@{/img/logo.png}" title="Logo" />
					</div>

					<!-- 			<h2 class="form-signin-heading">Acceder a tu Cuenta</h2> -->
					<div class="form-group" align="center">
						<div class="controls"></div>
						<div class="controls"></div>
						<div class="controls"></div>
					</div>

					<!-- 					<legend> -->
					<!-- 						<center>Accede a tu cuenta</center> -->
					<!-- 					</legend> -->
					<div class="bs-example">

						<div class="alert alert-danger display-hide fade in"
							id="ajaxError">
							<button type="button" class="close" data-close="alert"
								aria-hidden="true">&times;</button>
							<span class="glyphicon glyphicon-hand-right"></span> <strong
								id="textoAjaxError"></strong>
						</div>

						<div th:if="${loginError}" class="alert alert-danger">
							<span class="glyphicon glyphicon-hand-right"></span> <b>
								Usuario o clave inv&aacute;lido/a</b>

						</div>
						<div th:if="${logoutSuccess}" class="alert alert-success">
							<span class="glyphicon glyphicon-thumbs-up"></span> <b> Has
								cerrado tu sesi&oacute;n con éxito</b> <span
								class="glyphicon glyphicon-off"></span>
						</div>
						<div th:if="${timeout}" class="alert alert-warning">
							<span class="glyphicon glyphicon-time"></span> <b> Tu
								sesi&oacute;n ha expirado</b>
						</div>
						<!-- 						<div class="col-sm-offset-4 col-sm-4"> -->
						<div class="form-group" style="text-align: center;">
							<label for="j_username" class="col-sm-4 control-label">Email</label>
							<div class="col-sm-4">
								<input type="email" id="j_username" name="j_username"
									class="form-control lowercase" placeholder="Email..." value=""
									autocomplete="on" required="required" autofocus="autofocus"
									onblur="minuscula(this);" />
							</div>
						</div>
						<div class="form-group" style="text-align: center;">
							<label for="j_password" class="col-sm-4 control-label">Password</label>
							<div class="col-sm-4">
								<input type="password" id="j_password" name="j_password"
									class="form-control" placeholder="password..."
									required="required" autocomplete="off"
									onkeypress="capLock(event)" />
								<div id="divMayus" style="visibility: hidden">El bloqueo
									de may&uacute;sculas est&aacute; activado.</div>
							</div>
						</div>

						<div class="form-group" style="text-align: center;">
							<label for="defaultReal" class="col-sm-4 control-label">Ingrese
								el texto visualizado:</label>
							<div class="col-sm-4">
								<input type="text" id="defaultReal" name="defaultReal"
									class="form-control uppercase" value="" maxlength="6"
									autocomplete="off" required="required" autofocus="autofocus" />
							</div>
						</div>

						<div class="form-group" style="text-align: center;">
							<div class="col-sm-12 text-center">
								<button class="btn btn-primary" type="button" name="login"
									id="login">Iniciar Sesi&oacute;n</button>
								<br /> <a class="btn btn-link "
									th:href="@{/acceso/signup}">Deseo Registrarme</a> <br />
								<a class="btn btn-link " th:href="@{/acceso/clave-olvidada}">Olvid&eacute;
									mi contrase&ntilde;a</a> <br /> <br /> 

							</div>
						</div>
						<!-- 						 </div> -->
					</div>

				</div>


			</form>
		</div>

	</section>

	<footer>
		<section layout:fragment="custom-footer">
			<script th:src="@{/js/jquery.realperson.min.js}"></script>

			<script type="text/javascript">
				// DOM LISTO

				$(function() {
					$('#defaultReal').realperson();
				});
				
				$(document).ready(function(){

			// 		$("#login").on("mouseup",function(){
						if ($("#loginPanel").is(':visible')){
							$(this).attr('type','submit');
						}else{
							$("#loginPanel").toggle('slow');
							$(this).attr('type','button');
						}

						$('#login').live('click', function() {

							var form = $('#loginForm');
							
								var errorPrincipal = $('#ajaxError'); 
								errorPrincipal.fadeOut(0);
								var successPrincipal = $('.alert-success');
								successPrincipal.fadeOut(0);
								var captchaOk = "0";
								var checkAccion = '/sisale/acceso/captcha';
								$.ajax({
									type : 'POST',
									url : checkAccion,
									async: false,
									data : ({
										defaultReal : $('#defaultReal').val(),
										defaultRealHash : $('.realperson-hash').val()
									}),
									success : function(data, status) {
										captchaOk = data;
									},
									fail : function( jqXHR, textStatus ) {
										captchaOk = "-1";
									}
								});
								
								if(captchaOk == "1"){
									$(form).submit();
								}else if (captchaOk == "0"){
									$("#textoAjaxError").html('<STRONG>El texto ingresado no corresponde</STRONG>.');
									errorPrincipal.delay(200).addClass("fade in").fadeOut(4000).show();
									$('#defaultReal').focus();
									return;
								}else if (captchaOk == "-1"){
									$("#textoAjaxError").html('<STRONG>Ocurrio un error al validar el texto</STRONG>.');
									errorPrincipal.delay(200).addClass("fade in").fadeOut(4000).show();
									$('#j_username').focus();
									return;	
								}
							
						});
			// 		});
				});
			</script>
		</section>
	</footer>
</body>


</html>